<template>
  <div>
     <div class="header">
      <van-nav-bar title="修改地址" @click-left="$router.back()">
        <template #left>
          <van-icon name="arrow-left" size="26" color="#000" />
        </template>
      </van-nav-bar>
      </div>
<div class="main">
  <ul>
    <li v-for="(item,index) in list " :key="index">
     
     <div><p>{{item.name}}  <span>{{item.tel}}</span></p>
    
      <p>{{item.province+item.city+item.county}}</p></div>
    <van-tag color="red" text-color="#fff"  size="large" v-if="item.isDefault">默认</van-tag>
      <van-icon name="edit" @click="jumpTo(item.addressid)"></van-icon>
      

    </li>
    </ul>
</div>

<van-button type="danger" round block   @click="next">添加地址</van-button>

  </div>
</template>

<script>
import { getAddressList} from "../api/address";
import Vue from 'vue';
import { AddressList,Toast,Tag } from 'vant';

Vue.use(AddressList);
Vue.use(Toast);
Vue.use(Tag);
export default {
 data() {
    return {
      
    
      list:[]
    };
  },
  methods: {
  jumpTo(addressid){
    this.$router.push("/addressupdate/"+addressid)
  },
   next(){
    this.$router.push('/addressadd')
   }
  },
  created () {
      getAddressList({userid:localStorage.getItem("userid")}).then((data)=>{
        
        console.log(data.data.data)
      this.list=data.data.data

    
    })
  }
}
</script>

<style scoped>
.main ul{
  padding: .3rem;
}
.main ul li{
 height: 1rem;
 width: 100%;
 margin: .1rem;
 padding: .1rem;
 display: flex;
 justify-content: space-between;
 align-items: center;
 border: 1px solid rgb(236, 144, 144);
 border-radius: .2rem;
 font-size: .2rem;

}
.main ul li p:nth-of-type(1){
  color: #000;
  font-size: .24rem;
  font-weight: 900;
}
.main ul li p span{
  font-weight: normal;
  font-size: .18rem;
}
.main ul li p:nth-of-type(2){
  font-size: .22rem;
  
}
.van-button{
  width: 80%;
    margin: 20px auto;
    }


</style>